<template>
    <v-card elevation="0">
        <v-container class="px-2">
            <!-- 视频列表 -->
            <div v-if="videoList.length > 0">
                <v-row>
                    <v-col cols="12" v-for="(item, index) in videoList" :key="index">
                        <v-card class="video-item-card mb-3 rounded-lg" variant="outlined">
                            <v-row no-gutters>
                                <!-- 视频封面 -->
                                <v-col cols="12" sm="4" md="3" class="video-thumbnail-container">
                                    <v-hover v-slot="{ isHovering, props }">
                                        <v-card
                                            v-bind="props"
                                            class="ma-2 rounded-lg overflow-hidden"
                                            height="160"
                                            flat
                                        >
                                            <v-img
                                                :src="apiFileGet(item.cover)"
                                                class="video-thumbnail"
                                                height="160"
                                                cover
                                                @click="playVideo(item)"
                                            >
                                                <div class="video-duration d-flex align-center justify-center rounded-pill">
                                                    <v-icon size="small" class="mr-1">mdi-play</v-icon>
                                                    播放
                                                </div>
                                                
                                                <v-chip
                                                    class="ma-2 audit-chip"
                                                    color="warning"
                                                    :variant="'flat'"
                                                    v-if="item.auditStatus == 2"
                                                >
                                                    {{ item.msg }}
                                                </v-chip>
                                                
                                                <v-chip
                                                    class="ma-2 audit-chip"
                                                    color="warning"
                                                    :variant="'flat'"
                                                    v-else-if="item.auditStatus > 0"
                                                >
                                                    审核中
                                                </v-chip>
                                                
                                                <v-overlay
                                                    :model-value="isHovering"
                                                    contained
                                                    class="align-center justify-center"
                                                    scrim="rgba(0,0,0,0.3)"
                                                >
                                                    <v-btn
                                                        icon="mdi-play-circle"
                                                        size="x-large"
                                                        color="white"
                                                        variant="text"
                                                        @click="playVideo(item)"
                                                    ></v-btn>
                                                </v-overlay>
                                            </v-img>
                                        </v-card>
                                    </v-hover>
                                </v-col>
                                
                                <!-- 视频信息 -->
                                <v-col cols="12" sm="8" md="9">
                                    <v-card-item>
                                        <v-card-title class="text-h6 font-weight-bold mb-2">
                                            {{ item.title }}
                                        </v-card-title>
                                        
                                        <v-card-text class="video-description">
                                            <div class="text-body-2 text-grey text-truncate-3">
                                                {{ item.description || '暂无描述' }}
                                            </div>
                                            
                                            <v-chip-group class="mt-3">
                                                <v-chip 
                                                    v-for="(label, i) in item.labelNames.split(',')" 
                                                    :key="i" 
                                                    size="small" 
                                                    variant="outlined" 
                                                    class="mr-1"
                                                >
                                                    {{ label }}
                                                </v-chip>
                                            </v-chip-group>
                                            
                                            <div class="mt-4 d-flex justify-end">
                                                <v-btn 
                                                    prepend-icon="mdi-pencil" 
                                                    color="primary" 
                                                    variant="tonal" 
                                                    class="mr-2" 
                                                    size="small"
                                                    @click="edit(item)"
                                                >
                                                    编辑
                                                </v-btn>
                                                <v-btn 
                                                    prepend-icon="mdi-delete" 
                                                    color="error" 
                                                    variant="tonal" 
                                                    size="small"
                                                    @click="videoInfo = item; dialog = true"
                                                >
                                                    删除
                                                </v-btn>
                                            </div>
                                        </v-card-text>
                                    </v-card-item>
                                </v-col>
                            </v-row>
                        </v-card>
                    </v-col>
                </v-row>
                
                <!-- 分页 -->
                <div class="d-flex justify-center mt-4" v-if="pageInfo.pages > 1">
                    <v-pagination
                        v-model="pageInfo.page"
                        :length="pageInfo.pages"
                        rounded
                        class="pagination-control"
                    ></v-pagination>
                </div>
            </div>
            
            <!-- 无数据提示 -->
            <v-card v-else class="pa-5 text-center" flat>
                <v-icon icon="mdi-video-off-outline" size="64" class="mb-3 text-grey"></v-icon>
                <div class="text-h6 text-grey mb-2">暂无视频</div>
                <div class="text-body-2 text-grey-darken-1 mb-4">您还没有上传任何视频</div>
                <v-btn color="primary" variant="tonal" prepend-icon="mdi-upload" @click="tab = 0">
                    立即上传
                </v-btn>
            </v-card>
        </v-container>
        
        <!-- 确认删除对话框 -->
        <v-dialog v-model="dialog" max-width="400" transition="dialog-bottom-transition">
            <v-card class="rounded-lg">
                <v-card-title class="text-h5 pb-2">
                    确定要删除该视频？
                </v-card-title>
                <v-divider></v-divider>
                <v-card-text class="pt-4">
                    <div class="mb-3">
                        <span class="text-grey">视频标题：</span>
                        <span class="font-weight-medium">{{ videoInfo.title }}</span>
                    </div>
                    <v-alert type="warning" variant="tonal" density="compact">
                        此操作无法撤销，删除后数据将无法恢复
                    </v-alert>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="grey" variant="text" @click="dialog = false">
                        取消
                    </v-btn>
                    <v-btn color="error" variant="tonal" @click="removeVideo()">
                        删除
                    </v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
        
        <!-- 编辑对话框 -->
        <v-dialog v-model="editDialog" max-width="600" transition="dialog-bottom-transition">
            <v-card class="rounded-lg" title="编辑视频信息">
                <v-divider />
                <VideoEdit :current-video="videoInfo" class="ma-4" :clear="clear" :save="saveEdit" />
            </v-card>
        </v-dialog>
        
        <!-- 视频播放对话框 -->
        <v-dialog :model-value="videoDialog" fullscreen transition="dialog-bottom-transition">
            <v-card v-if="currentVideo">
                <Video :video-info="currentVideo" :close-video="() => playVideo(null)" />
            </v-card>
        </v-dialog>
        
        <!-- 提示消息 -->
        <v-snackbar v-model="snackbar.show" :color="snackbar.color" location="top">
            {{ snackbar.text }}
            <template v-slot:actions>
                <v-btn icon="mdi-close" variant="text" @click="snackbar.show = false"></v-btn>
            </template>
        </v-snackbar>
    </v-card>
</template>
<script setup>
import { onMounted, onUpdated, ref, watch, inject } from 'vue';
import { apiFileGet } from '../../../apis/file';
import { apiRemoveVideo } from '../../../apis/user/videoManger';
import { apiGetVideoByUser } from '../../../apis/video';
import Video from '../../../components/video/index.vue';
import VideoEdit from './edit.vue';

const tab = inject('tab', ref(0));
const pageInfo = ref({
    page: 1,
    pages: 0
})
const videoList = ref([])
const dialog = ref(false)
const editDialog = ref(false)
const videoInfo = ref({})

const snackbar = ref({
    show: false,
    text: ""
})
const getVideo = () => {
    apiGetVideoByUser(pageInfo.value.page).then(({ data }) => {
        if (!data.state) {
            return;
        }
        videoList.value = data.data.records
        pageInfo.value.pages = data.data.pages
    })
}
onUpdated(()=>{
    getVideo()
})
onMounted(() => {
    getVideo()
})
const edit = (info) => {
    let temp = Object.assign({}, info)
    temp.labelNames = temp.labelNames.split(",")
    videoInfo.value = temp
    editDialog.value = info ? true : false
}
const removeVideo = () => {
    apiRemoveVideo(videoInfo.value.id).then(({ data }) => {
        snackbar.value = {
            text: data.message,
            show: true,
            color: data.state ? "success" : "error"
        }
        dialog.value = false
        videoInfo.value = {}
        if (data.state) {
            getVideo()
        }
    })
}
const saveEdit = (data) => {
    snackbar.value = {
        text: data.message,
        show: true,
        color: data.state ? "success" : "error"
    }
    if (data.state) {
        clear()
        getVideo()
    }
}
const clear = () => {
    videoInfo.value = {}
    editDialog.value = false
}
const currentVideo = ref(null)
const videoDialog = ref(false)
const playVideo = (video) => {
    videoDialog.value = false
    currentVideo.value = video
    videoDialog.value = video ? true : false
}
watch(()=>pageInfo.value.page, ()=>{
    getVideo()
}, {immediate:true})
</script>

<style scoped>
.video-item-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.video-item-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.video-thumbnail {
    position: relative;
    transition: all 0.3s ease;
}

.video-thumbnail-container {
    position: relative;
}

.video-duration {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 2px 8px;
    font-size: 12px;
}

.audit-chip {
    position: absolute;
    left: 8px;
    top: 8px;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pagination-control {
    margin-top: 20px;
    margin-bottom: 30px;
}
</style>